<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/28
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>购物车</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon/favicon.png">
    <script>
        if (${sessionScope.size() == 0}) {
            alert("请登录");
        }
    </script>
</head>
<body>
<jsp:include page="header.jsp" flush="true"/>
<main>
    <!-- Hero area Start-->
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="slider-area">
                    <div class="slider-height2 slider-bg5 d-flex align-items-center justify-content-center">
                        <div class="hero-caption hero-caption2">
                            <h2>购物车</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  Hero area End -->
    <!--================Cart Area =================-->
    <section class="cart_area section-padding">
        <div class="container">
            <div class="cart_inner">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">书名</th>
                            <th scope="col">价格</th>
                            <th scope="col">数量</th>
                            <th scope="col">合计</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="cart" items="${carts}">
                            <tr>
                                <td>
                                    <div class="media">
                                        <div class="d-flex">

                                            <img src="${cart.books.bookImg}" alt="" />
                                        </div>
                                        <div class="media-body">
                                            <p>${cart.books.bookName}</p>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <h5>￥${cart.books.price}</h5>
                                    <input value="${cart.books.price}" type="hidden" id="price">
                                </td>
                                <td>
                                    <div class="product_count">
                                        <span class="input-number-decrement" id="decrement"> <i class="ti-minus"></i></span>
                                        <input class="input-number" id="counts" type="text" value="${cart.counts}" min="1" max="${cart.books.bookCounts}">
                                        <input id="bookcounts" value="${cart.books.bookCounts}" type="hidden"/>
                                        <input id="id" type="hidden" value="${cart.cartId}"/>
                                        <span class="input-number-increment" id="increment"> <i class="ti-plus"></i></span>
                                    </div>
                                </td>
                                <td>
                                    <h5 id="total"></h5>
                                </td>
                                <td>
                                    <a href="${pageContext.request.contextPath}/bookStore/deletCartById?id=${cart.cartId}" style="color: black;">删除</a>
                                </td>
                            </tr>
                        </c:forEach>

                        <tr class="bottom_button">
                            <td>
                                <a class="btn" onclick="update()">更新购物车</a>
                                <script>
                                    function update (){
                                        location.reload();
                                    }
                                </script>
                            </td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <h5>小计</h5>
                            </td>
                            <td>
                                <h5 id="Subtotal"></h5>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                    <div class="checkout_btn_inner float-right">
                        <a class="btn" href="${pageContext.request.contextPath}/bookStore/index">继续购物</a>
                        <a class="btn checkout_btn" href="${pageContext.request.contextPath}/bookStore/toCheckOut?userId=${sessionScope.user.id}">结算</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================End Cart Area =================-->
</main>
<jsp:include page="footer.jsp" flush="true"/>
<!-- Scroll Up -->
<div id="back-top" >
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<script src="${pageContext.request.contextPath}/statics/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/jquery-3.4.1.min.js"></script>

<script>
    let counts = document.querySelectorAll("#counts");
    let increment = document.querySelectorAll("#increment");
    let decrement = document.querySelectorAll("#decrement");
    let id = document.querySelectorAll("#id");
    let total = document.querySelectorAll("#total");
    let price = document.querySelectorAll("#price");
    let Subtotal = document.getElementById("Subtotal");
    let bookcounts = document.querySelectorAll("#bookcounts");

    var sum = 0;
    var pc = 0;

    for (let i=0;i<counts.length;i++) {
        increment[i].onclick = function () {
            if (counts[i].value < bookcounts[i].value){
                counts[i].value = counts[i].value-(-1);
                $.ajax({
                    url: "${pageContext.request.contextPath}/bookStore/updateCart",
                    type: "POST",
                    dataType: "json",
                    data: { id: id[i].value, counts: counts[i].value }
                })
                pc = Number(price[i].value);
                var p = price[i].value*counts[i].value;
                total[i].innerHTML = "￥"+p;
                sum += pc;
                Subtotal.innerHTML = "￥"+ sum;
            }else {
                alert("库存不够");
            }
        }
        decrement[i].onclick = function () {
            if(counts[i].value > 1){
                counts[i].value = counts[i].value-(+1);
                $.ajax({
                    url: "${pageContext.request.contextPath}/bookStore/updateCart",
                    type: "POST",
                    dataType: "json",
                    data: { id:id[i].value , counts: counts[i].value }
                })
                pc = Number(price[i].value);
                var p = price[i].value*counts[i].value;
                total[i].innerHTML = "￥"+p;
                sum -= price[i].value;
                Subtotal.innerHTML = "￥"+ sum;
            }else {
                alert("数量不可低于1");
            }

        }
        var p = price[i].value*counts[i].value;
        total[i].innerHTML = "￥"+p;
        sum += p;
    }
    Subtotal.innerHTML = "￥"+ sum;
</script>
</body>
</html>
